import React, { useState } from 'react';
import { Upload, Button, message, UploadFile } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { RcFile } from 'antd/es/upload';
import './Upload.css';

interface UploadComponentProps {
  fileList: UploadFile<any>[];
  setFileList: React.Dispatch<React.SetStateAction<UploadFile<any>[]>>;
  accept: string;
}

const UploadComponent: React.FC<UploadComponentProps> = ({ fileList, setFileList, accept }) => {
  const [previewUrl, setPreviewUrl] = useState<string>('');

  const validateFile = (file: RcFile) => {
    const isImage = file.type.startsWith('image/');
    const isVideo = file.type.startsWith('video/');
    
    if (!isImage && !isVideo) {
      message.error('只能上传图片或视频文件！');
      return false;
    }

    const maxSize = isImage ? 5 * 1024 * 1024 : 50 * 1024 * 1024; // 图片5MB，视频50MB
    if (file.size > maxSize) {
      message.error(`文件大小不能超过${isImage ? '5MB' : '50MB'}！`);
      return false;
    }

    // 验证视频格式
    if (isVideo) {
      const allowedVideoFormats = ['video/mp4', 'video/webm', 'video/ogg'];
      if (!allowedVideoFormats.includes(file.type)) {
        message.error('只支持 MP4, WebM, OGG 格式的视频！');
        return false;
      }
    }

    return true;
  };

  const handlePreview = async (file: UploadFile) => {
    if (!file.url && !file.preview) {
      file.preview = URL.createObjectURL(file.originFileObj as Blob);
    }
    setPreviewUrl(file.url || (file.preview as string));
  };

  const props = {
    onRemove: (file: UploadFile) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
      if (previewUrl) {
        URL.revokeObjectURL(previewUrl);
        setPreviewUrl('');
      }
    },
    beforeUpload: (file: RcFile) => {
      if (!validateFile(file)) {
        return false;
      }

      // 创建预览URL
      const preview = URL.createObjectURL(file);
      const newFile: UploadFile = {
        uid: file.uid,
        name: file.name,
        status: 'done',
        url: preview,
        originFileObj: file,
      };
      
      setFileList([newFile]);
      setPreviewUrl(preview);
      return false; // 阻止自动上传
    },
    fileList,
    accept,
    maxCount: 1,
    showUploadList: false, // 不显示默认的上传列表
  };

  return (
    <div className="upload-container">
      <Upload {...props}>
        {fileList.length >= 1 ? (
          <div className="preview-container">
            {fileList[0].originFileObj?.type.startsWith('image/') ? (
              <img
                src={previewUrl}
                alt="预览图片"
                className="preview-image"
              />
            ) : (
              <div className="video-preview-container">
                <video
                  src={previewUrl}
                  controls
                  className="preview-video"
                  preload="metadata"
                >
                  您的浏览器不支持视频预览
                </video>
                <div className="file-info">
                  <span>{fileList[0].name}</span>
                  <span>{(fileList[0].size! / (1024 * 1024)).toFixed(2)} MB</span>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div className="upload-button">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>
              点击上传{accept.includes('video') ? '视频' : '图片'}
            </div>
          </div>
        )}
      </Upload>
    </div>
  );
};

export default UploadComponent; 